<template>
    <div class="wrapper">
        <hr class="hr-solid-content" data-content="点赞动画">
        <p>利用雪碧图结合动画完成</p>
        <div style="display: flex;">
            <label class="animation-click">
                <input type="checkbox" style="display: none;">
                <div class="heart-love"></div>
            </label>
            
            <label class="animation-click">
                <input type="checkbox" style="display: none;">
                <div class="star-love"></div>
            </label>
        </div>

        <hr class="hr-solid-content" data-content="CSS循环轮播">
        <div style="padding: 10px;">
            <div class="carousel basic">
                <div class="carousel-group animated">
                    <div class="card">A</div>
                    <div class="card">B</div>
                    <div class="card">C</div>
                    <div class="card">D</div>
                    <div class="card">E</div>
                </div>

                <div aria-hidden class="carousel-group animated">
                    <div class="card">A</div>
                    <div class="card">B</div>
                    <div class="card">C</div>
                    <div class="card">D</div>
                    <div class="card">E</div>
                </div>
            </div>
        </div>

        <hr class="hr-solid-content" data-content="波浪线">
        <div class="wave-line">利用径向渐变实现波浪线</div>
        <div class="svg-wave-line">利用SVG波形图实现波浪线</div>
    </div>
</template>

<style scoped>
.wrapper {
    padding: 8px;
    overflow: auto;
}

/* 点赞动画 */
.animation-click {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.heart-love {
    width: 100px;
    height: 100px;
    background-image: url(../../assets/css/animation/heart-love.png);
    background-size: 2900px 100px;
}

.star-love {
    width: 64px;
    height: 45px;
    background-image: url(../../assets/css/animation/star.png);
    background-size: 3584px 45px;
}

.animation-click input:checked~.heart-love {
    animation: love 2s steps(29, jump-none) forwards;
}

.animation-click input:checked~.star-love {
    animation: star 1.5s steps(56, jump-none) forwards;
}

@keyframes love {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -2800px 0;
    }
}

@keyframes star {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -3520px 0;
    }
}

/* CSS轮播 */
.carousel {
    display: flex;
    margin: 0 auto;
    padding: 20px 0;
    max-width: 700px;
    overflow: hidden;
    border: 1px solid #ccc;
    will-change: transform;
}

.carousel-group {
    flex: 0 0 100%;
    display: flex;
    gap: 20px;
    padding-right: 20px;
}

.carousel-group.animated {
    animation: scrolling 10s linear infinite;
}

.carousel:hover .carousel-group {
    animation-play-state: paused;
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    color: white;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
    font-size: xx-large;

    &:nth-child(1) {
        background: #7958ff;
    }
    &:nth-child(2) {
        background: #5d34f2;
    }
    &:nth-child(3) {
        background: #4300da;
    }
    &:nth-child(4) {
        background: #3b01c2;
    }
    &:nth-child(5) {
        background: #2c0092;
    }
}

/* 波浪线 */
.wave-line {
    padding: 0 0 5px;
    color: red;
    background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
        radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;

    background-size: 20px 20px;
    background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);

    animation: waveFlow 1s infinite linear;
}

@keyframes waveFlow {
    from { background-position-x: -10px, 0; }
    to { background-position-x: -30px, -20px; }
}

.svg-wave-line {
    padding: 5px 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%; 
    background-size: 20px auto;
    animation: waveMove 1s infinite linear;
}

@keyframes waveMove {
    from { background-position: 0 100%; }
    to   { background-position: -20px 100%; }
}
</style>